<template>
  <div>
    <Card class="card clear-float">
      <p class="card-title" slot="title">{{$t('y1ft11WrPU-guAaZvsmye')}}</p>
      <div class="menu-container">
        <!-- <div class="menu-operate">
          <span>添加菜单</span>
          <span style="margin-left: 20px">
            <el-button
              type="primary"
              icon="el-icon-plus"
              size="mini"
              circle
              @click="append()"
            ></el-button>
          </span>
        </div> -->
        <div class="menu-content">
          <Row>
            <Col span="12">
              <Card class="card">
                <p slot="title">{{$t('ycZ-Dyf5NbIN7ieepYCvI')}}</p>
                <a href="#" slot="extra" @click.prevent="append()">
                    <Icon type="ios-add"></Icon>
                    {{$t('bdxeIdyunJkGFMvT61U0P')}}
                </a>
                <div class="card-content">
                  <el-tree
                    :data="firstLevelData"
                    :props="defaultProps"
                    node-key="id"
                    default-expand-all
                    :expand-on-click-node="false"
                  >
                    <span class="custom-tree-node" slot-scope="{ node, data }">
                      <span>{{ node.label }}({{ data.id }})</span>
                      <span>
                        <el-button
                          circle
                          type="primary"
                          size="mini"
                          @click="append(node, data)"
                        >
                          <i class="el-icon-plus"></i>
                        </el-button>
                        <el-button
                          circle
                          type="warning"
                          size="mini"
                          @click="edit(node, data)"
                        >
                          <i class="el-icon-edit"></i>
                        </el-button>
                        <el-button
                          circle
                          type="danger"
                          size="mini"
                          @click="remove(node, data)"
                        >
                          <i class="el-icon-minus"></i>
                        </el-button>
                      </span>
                    </span>
                  </el-tree>
                </div>
              </Card>
            </Col>
            <Col span="12">
              <Card class="card">
                <p slot="title">{{$t('l6gyAOXMBMojl49wuzM3p')}}</p>
                <div class="card-content">
                  <el-tree
                    :data="secondLevelData"
                    :props="defaultProps"
                    node-key="id"
                    default-expand-all
                    :expand-on-click-node="false"
                  >
                    <span class="custom-tree-node" slot-scope="{ node, data }">
                      <span>{{ node.label }}({{ data.id }} - {{ data.pid }})</span>
                      <span>
                        <el-button
                          circle
                          type="warning"
                          size="mini"
                          @click="edit(node, data)"
                        >
                          <i class="el-icon-edit"></i>
                        </el-button>
                        <el-button
                          circle
                          type="danger"
                          size="mini"
                          @click="remove(node, data)"
                        >
                          <i class="el-icon-minus"></i>
                        </el-button>
                      </span>
                    </span>
                  </el-tree>
                </div>
              </Card>
            </Col>
          </Row>
        </div>
      </div>
    </Card>
    <Modal
      v-model="modal"
      :title="(status === 'new' ? $t('N8xdbBoV-d6Vc33tKrGGm') : $t('3cH_U2GeBUW1V74W8oDNv')) + $t('y1ft11WrPU-guAaZvsmye')"
      footer-hide
      :mask-closable="false"
    >
      <menu-form
        :show="modal"
        :data="menu"
        :rules="rules"
        :status="status"
        :parent="parent"
        @success="success"
        @fail="fail"
        @close="close"
      />
    </Modal>
  </div>
</template>

<script>
import MenuForm from './components/routemenu'
import { getMenuManageListInfo, deleteMenu } from '@/api/data2'

const isFalse = p => {
  return _.isNil(p) || p === '' || p == 0
}

const defaults = () => {
  return {
    name: '',
    urlname: '',
    titlename: '',
    id: '',
    pid: 0,
    sort: 0
  }
}

export default {
  components: {
    MenuForm
  },
  name: 'menu_manage',
  data () {
    return {
      data: [],
      // treeData: [],
      firstLevelData: [],
      secondLevelData: [],
      status: 'new',
      modal: false,
      menu: defaults(),
      rules: {
        titlename: [
          { required: true, message: this.$t('QJtx6Ibn9Qk_zM7rfQOIt'), trigger: 'blur' }
        ],
        name: [
          { required: true, message: this.$t('iplgI_fBBy8y30gdiCoSI'), trigger: 'blur' }
        ]
      },
      parent: null,
      defaultProps: {
        children: 'children',
        label: 'titlename'
      }
    }
  },
  computed: {},
  created () {
    this.queryData()
  },
  methods: {
    async queryData () {
      const { code, data, desc } = await getMenuManageListInfo()
      if (code == 200) {
        this.data = data.datalist || []
      } else {
        this.$Message.error(desc)
        this.data = []
      }
      this.getTreeData()
    },
    getTreeData () {
      // const data = this.data.map(d => {
      //   return _.assign({}, d, { children: [] })
      // })
      // _.forEach(data, d => {
      //   if (!isFalse(d.pid)) {
      //     const target = data.find(l => l.id === d.pid)
      //     target && target.children.push(d)
      //   }
      // })
      // const root = data.filter(d => isFalse(d.pid))
      // this.treeData = root
      this.firstLevelData = _.cloneDeep(this.data.filter(d => isFalse(d.pid)))
      this.secondLevelData = _.cloneDeep(this.data.filter(d => !isFalse(d.pid)))
    },

    append (node) {
      this.status = 'new'
      this.menu = _.assign(
        defaults(),
        node
          ? {
            pid: node.data.id
          }
          : {}
      )
      this.modal = true
      this.parent = node ? node.data : null
    },

    edit (node, data) {
      this.status = 'edit'
      this.menu = _.cloneDeep(data)
      this.modal = true
      this.parent = node.parent
    },

    async remove (node, data) {
      const { code, desc } = await deleteMenu(data)
      if (code == 200) {
        // const parent = node.parent
        // const children = parent.data.children || parent.data
        // const index = children.findIndex(d => d.id === data.id)
        // children.splice(index, 1)
        this.$Message.success(this.$t('X3B4zUoYLLk9A5CKgzmbn'))
        this.queryData()
      } else {
        this.$Message.error(desc)
      }
    },

    success (data) {
      this.modal = false
      // if (this.status === 'new') {
      //   if (this.parent) {
      //     this.parent.children.push(data)
      //   } else {
      //     this.treeData.push(data)
      //   }
      // } else {
      //   const children = this.parent.children || this.parent.data
      //   const index = children.findIndex(d => d.id === data.id)
      //   index > -1 && children.splice(index, 1, data)
      // }
      this.$Message.success(this.status === 'new' ? this.$t('Hsf3TzqX4ktuzZVNmVHMe') : this.$t('rJ9uXBlTbaC-gCrMJyhCy'))
      this.queryData()
    },

    fail (desc) {
      this.modal = false
      this.$Message.error(desc)
    },

    close () {
      this.modal = false
    }
  }
}
</script>

<style lang="stylus" scoped>
.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 8px;
}
.menu-operate {
  padding-bottom: 10px;
  padding-left: 10px;
}
.el-tree >>> .el-tree-node
  padding 8px 0
.el-tree >>> .el-tree-node .el-tree-node__content
  padding-bottom 8px
.el-tree >>> .el-tree-node__children .el-tree-node__content
  padding-bottom 0px
.card
  margin 10px
  & >>> .ivu-card-extra
    top 8px
</style>
